<template>
    <div class="ol-train" @click="toDetail">
        <!-- <img :src="'/uploads'+data.thumb"> -->
        <div class="content">
            <van-image :src="'/uploads'+data.thumb" lazy-load fit="cover"></van-image>
            <div class="m-back"></div>
            <h4 class="train-name">{{data.train_name}}</h4>
            <p class="train-scene">适合场景: {{data.scene_name}}</p>
            <p class="train-body">锻炼部位: {{data.body_name}}</p>
            <p>难度: {{data.degree}}</p>
            <p class="train-hits">练习人数: {{data.hits}} 人</p>
        </div>
    </div>
</template>

<script>
export default {
  name: 'OnlineTrainCard',
  props: {
    data: Object
  },
  methods: {
    toDetail () {
      this.$root.$router.push({
        path: '/trainingdetail',
        query: {
          id: this.data.id
        }
      })
    }
  }
}
</script>

<style scoped>
.ol-train{
    height: 18rem;
    overflow: hidden;
}
.content{
    position: relative;
}
.content>p,h4{
    color: white;
    position: absolute;
    padding: 0;
    margin: 0;
    left: 1rem;
}
.van-image{
    height: 18rem;
    width: 100%;
    border-radius: 10px;
    overflow: hidden;
}
.m-back{
    position: absolute;
    height: 18rem;
    width: 100%;
    background-color: #4e5153a2;
    top: 0;
    border-radius: 10px;
}
.train-name{
    top: 2rem;
    font-size: 1.8rem;
    font-weight: 500;
}
.train-scene{
    top: 7rem;
    font-size: 1.1rem;
}
.train-body{
    top: 10rem;
}
.train-hits{
    top: 12rem;
    font-size: 0.9rem;
}
</style>
